<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>电灯开关案例</title>
<style>
	body{padding:20px;font-size:20px;}
	#div1{width:30%;border:1px solid red;padding:5px;margin-bottom:20px;}
</style>
<!-- 引入jquery的js库
<script src="js/jquery-1.8.3.min.js"></script> -->
<script>
	/** 练习：点击按钮，开灯或关灯 */
	var flag = false;//false表示默认状态为关灯
	function changeImg(){
		//1.获取表示img元素的JS对象（对象）
		var img1 = document.getElementById("img1");
		//2.通过判断切换图片（改变src属性值）
		if(!flag){
			img1.src = "imgs/on.gif";
		}else{
			img1.src = "imgs/off.gif";
		}
		flag = !flag;
	}
</script>
</head>
<body>
	<input type="button" value="开/关灯"
		onclick="changeImg()" /> <br/><br/>
	<img id="img1" src="imgs/off.gif"/>
	
</body>
</html>